<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建快速定制</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/eleTree.css" media="all">
    <style>
        .layui-icon-ok:before {
            content: "\e605";
        }
    </style>
</head>
<style>
    /*.page1{*/
    /*display: none;*/
    /*}*/
    .layui-input-block{
        /*margin-left: 40px;*/
    }
    .searchs{
        position: absolute;
        right: 200px;
    }
    .travel_list{
        height:200px;
        margin-left: 30px;
        margin-right: 30px;
        overflow-y: scroll;
    }

    .travel_tit{
        margin-left: 30px;
        margin-right: 30px;
    }
    .layui-table thead tr{
        background: #e6e6e6;
    }
    .page4-box{
        padding: 12px 16px;
    }
    .query-box{
        padding:20px 20px 10px 20px ;
        /*padding-top:20px;*/
        border: 1px solid #e6e6e6;
        min-height: 45px;
    }
    .selected_trip{
        border: 1px solid #e6e6e6;
    }
    .tripspan{
        margin-left: 40px;
        margin-right: 30px;
    }
    .tripspan span{
        line-height: 38px;
        background: #00a0e9;
        padding: 5px;
        border-radius: 10px;
        color: #fff;
    }
    .tag{
        float: left;
    }
    /*上一步下一步按钮居中*/
    .butcent{
        position: absolute;
        bottom: 20px;
        left: 40%;
        margin-left: 30%;
        width:20%;
        /*margin: 30px;*/
        padding: 30px;
    }

    .butcent2{
        margin-left: 70%;
        width:20%;
        padding: 30px;
    }

    .picturebut{
        /*background-color: #fbfdff;*/
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        font-size:22px;
        width:48%;
        height: 100%;
        margin-top:-10%;
        margin-left:-8%;
        cursor: pointer;
        line-height: 300px;
        vertical-align: top;
    }
    .page3{
        margin-left: 16%;
        margin-top: 20%;
    }
    .layui-form-select .layui-edge{
        display: none;
        right: 0;
    }
    th{
        text-align: left;
    }
    .layui-input{
        border-radius: 5px;
    }

</style>
<body>

<!--客户信息的弹窗的内容数据-->
<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>行程交通配置信息</legend>
    </fieldset>
    <form class="layui-form " id="traffic" action="">
        <div class="page1">

            <div class="layui-form-item">
                <label class="layui-form-label">交通类型</label>
                <div class="layui-input-inline">
                    <select name="traffic_type" lay-verify="" lay-filter="traffic_type" lay-search >
                        <option value="">请选择</option>
                        {volist name="transport" id="trans_v" key="trans_k"}
                        <option value="{$trans_k}">{$trans_v}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <a class="layui-btn layui-btn-sm" id="createTransport" href="javascript:void(0)">创建</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <div class="eleTree ele1" lay-filter="mytree"></div>
                </div>
            </div>

        </div>
    </form>
    <!--包车展示-->
    <table class="layui-table" lay-even="" lay-skin="line" style="width:45%;display: inline-block;float:right;position: fixed;position:fixed;top:40px;right:0">
        <colgroup>
            <col width="10%" align="center">
            <col width="15%" align="center">
            <col width="15%" align="center">
            <col width="25%" align="center">
            <col width="25%" align="center">
            <col width="10%" align="center">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
            <th>出发地</th>
            <th>目的地</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name='transList' id='value' key='key'}
        <tr>
            <td>{$key}</td>
            <td>{$value.day_title}</td>
            <td>{$value.type_title}</td>
            <td>{$value.s_poiname}</td>
            <td>{$value.e_poiname}</td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
</div>


<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
</body>
</html>


<script>
    layui.config({
        base : '__PUBLIC__/layui/lay/modules/'
    }).extend({
        selectM: '../../../multiple/selectM',
    }).use(['layer','form','jquery','selectM','laydate','table','eleTree'],function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            selectM = layui.selectM,
            laydate = layui.laydate,
            table = layui.table;
        eleTree = layui.eleTree;
        laydate.render({     //创建时间选择框
            elem: '#start_go_time' //指定元素
            ,format: 'yyyy-MM-dd'
            ,trigger:'click'
        });

        var allData = {$schedules|json_encode};
        var transport = {$transport|json_encode};
        var tree ;
        var selectDayData = [];
        var selectItemData = [];
        console.log(allData,transport)
        //expandChild 是否可展开子节点 expandAll是否默认展开所有
        function rendEleTree(data,expandChild=true,expandAll=false)
        {
            tree = eleTree.render({
                elem: '.ele1',
                data: data,
                // data: [{'id':1,'label':'测试测试','disabled':false,'child':[]}],
                showCheckbox: true,
                expandOnClickNode: expandChild,
                defaultExpandAll:expandAll
            });
        }
        // 节点点击事件
        eleTree.on("nodeClick(mytree)",function(d) {
            //console.log(d.data);
        })
        // input被选中事件
        eleTree.on("nodeChecked(mytree)",function(d) {
            // console.log(d.isChecked);   // input是否被选中
            // console.log(d.node);    // 点击的dom节点
            // console.log(this);      // input对于的dom

            console.log(d.data);    // 点击节点对于的数据
            console.log(d.isChecked);
            if(d.data.index.length>1){
                //记录选中的数值
                var p_index = d.data.index[0];
                var i_index = d.data.index[1];
                var val = p_index+'-'+i_index;
                if($.inArray(val,selectItemData)==-1 && d.isChecked){
                    selectItemData.push(val);
                    if($.inArray(p_index,selectDayData)){
                        selectDayData.push(p_index);
                    }
                }else if(!d.isChecked){
                    selectItemData.splice($.inArray(val,selectItemData),1);
                }
            }else{
                var p_index = d.data.index[0];
                if($.inArray(p_index,selectDayData)==-1 && d.isChecked){
                    selectDayData.push(p_index);
                    //增加子节点
                    var child_num = d.data.currentData.children.length;
                    for (var i=0;i<child_num;i++){
                        var val = p_index+"-"+i;
                        if($.inArray(val,selectItemData)==-1){
                            selectItemData.push(val);
                        }
                    }
                }else if(!d.isChecked){
                    selectDayData.splice($.inArray(p_index,selectDayData),1);
                    //删除子节点
                    var child_num = d.data.currentData.children.length;
                    for (var i=0;i<child_num;i++){
                        var val = p_index+"-"+i;
                        selectItemData.splice($.inArray(val,selectItemData),1);
                    }
                }
            }
            console.log(selectDayData,selectItemData);
        })
        //开启/禁止父级选择
        function changeDayDisabled(data,type=true)
        {
            if(data.length<1){
                return [];
            }else{
                $.each(data,function(i,v){
                    data[i].disabled = type;
                })
            }

            return data;
        }
        //根据子集决定父级是否可选
        function disabledParentByChild(data){
            if(data.length<1){
                return [];
            }else{
                $.each(data,function(i,v){
                    var childChecked = false;
                    $.each(v.children,function(c_i,c_v){
                        if(c_v.disabled){
                            childChecked = true;
                        }
                    })
                    data[i].disabled = childChecked;
                })
            }
            return data;
        }

        function disabledItem(data,p_index,i_index=-1)
        {
            if(data.length<1){
                return [];
            }else if(i_index!=-1){
                data[p_index]['children'][i_index].disabled = true;
            }else{
                data[p_index].disabled = true;
            }
            return data;
        }
        form.on('select(traffic_type)',function(data){
            var tans_type = data.value;
            selectItemData = [];
            selectDayData = [];
            if($.inArray(tans_type,['1','2'])>-1){
                treeData = changeDayDisabled(allData)
                rendEleTree(treeData,true,true);
            }else if($.inArray(tans_type,['3','4','5'])>-1){
                treeData = changeDayDisabled(allData,false);
                treeData = disabledParentByChild(treeData);
                // treeData = allData;
                rendEleTree(treeData,false);
            }else if($.inArray(tans_type,['6','7'])>-1){
                treeData = changeDayDisabled(allData,false)
                treeData = disabledParentByChild(treeData);
                rendEleTree(treeData,true);
            }else{
                rendEleTree(treeData,true);
            }
        })
        rendEleTree(allData,true,true);
        $("#createTransport").click(function(){
            var trip_id = {$trip['id']};
            var trans_type = $("select[name=traffic_type]").val();
            if($.inArray(trans_type,['1','2','3','4','5','6','7'])==-1){
                layer.msg("请选择交通类型");return false;
            }
            if(selectItemData.length<1 || selectDayData.length<1){
                layer.msg("请选择交通所涵盖的天数及POI");return false;
            }
            console.log({trip_id:trip_id,trans_type:trans_type,days:selectDayData,items:selectItemData})
            $.post("/admin/quicktrip/createMoreTransport",{trip_id:trip_id,trans_type:trans_type,days:selectDayData,items:selectItemData},function(data){
                layer.msg(data.msg)
                if(data.code==1){
                    setTimeout(function(){
                        window.location.reload();
                    },1000)
                }
            },'json')
        })
    })
</script>
